<template>
    <el-dialog class="dialog" :destroy-on-close="true" title="添加住户授权" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            
            <el-form-item label="住户" prop="member_sn">
                <el-select v-model="formData.member_sn" placeholder="请选择住户" @change="memberChange"
                    :remote-method="remoteMethod" filterable :remote="formData.checked == false" reserve-keyword default-first-option :loading="loading">
                    <el-option v-for="item in userData" :key="item.member_sn" :label="item.member_xm"
                        :value="item.member_sn"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二维码" v-if="formData.door_qrcode == '1'">
                {{ formData.door_qrcode == '1' ? '开通' : '未开通' }}
            </el-form-item>
            <el-form-item label="卡号" v-if="formData.door_card !== ''">
                {{ formData.door_card }}
            </el-form-item>
            <el-form-item label="临时密码" v-if="formData.door_pwd !== ''">
                {{ formData.door_pwd }}
            </el-form-item>
            <el-form-item label="人脸" prop="face_thumb" v-if="formData.face_thumb !== ''">
                <el-image style="width: 120px; height: 120px" :src="formData.face_thumb" fit="contain"></el-image>
            </el-form-item>
            <el-form-item label="有效期" prop="end_time">
                <el-date-picker v-model="formData.end_time" value-format="yyyy-MM-dd" placeholder="请选择有效期"
                    :pickerOptions="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item label="门禁组" prop="group_sn">
                <el-select multiple v-model="formData.group_sn" placeholder="请选择门禁组">
                    <el-option v-for="item in groupData" :key="item.group_sn" :label="item.group_name"
                        :value="item.group_sn"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="门禁考勤" prop="door_times" >
                <div class="box-row box-center tooltip-el">
                    <el-select v-model="formData.is_kq" placeholder="请选择门禁组">
                        <el-option v-for="item in kqData" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                    <el-tooltip>
                        <div slot="content">
                            若你选择了参与门禁考勤<br/><br/>
                            则根据你选择的门禁组中是否有门禁支持考勤功能。
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
             </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter } from 'vuex-class';
import { mixinDialogForm } from '@/mixin/dialog/Form';
import { mixinTime } from '@/mixin/Time';
import { mixinNext } from '@/mixin/Next';
import { cardMixin } from '@/mixin/CardMixin';
import { find } from 'lodash';
@Component({
    mixins: [mixinTime, mixinDialogForm, mixinNext, cardMixin]
})
export default class equipmentdoorScripUser extends Vue {
    // 续期
    @Action('equipmentCard/user') itemAdd: any;
    @Getter('equipmentDoorGroup/all') groupData: any;
    @Action('parkTenant/list') getUser2: any;

    kqData: any = [
        { label: '参与', value: '1' },
        { label: '不参与', value: '2' }
    ];
    // 表单数据
    formData: any = {
        checked: false,
        member_sn: '',
        door_card: "",
        door_pwd: '',
        face_thumb: '',
        door_qrcode: "",
        end_time: "",
        is_kq: "",
        door_sn: []
    };
    loading: any = false;
    memberChange(member_sn: any) {
        const me = this as any;
        const item = find(me.userData, { member_sn });
        me.formData.door_qrcode = item.door_qrcode.toString();
        me.formData.is_kq = item.is_kq.toString();
        me.formData.door_card = item.door_card;
        me.formData.door_pwd = item.door_pwd;
        me.formData.face_thumb = item.face_thumb;
    }


    created() {
        const me = this as any;
        me.getBuild();
        //  me.scripTypeData = this.typeData.filter((item) => item.item_value != 0);
    }

    remoteMethod(member_xm = '') {
        const me = this as any;
        if (member_xm.length < 1) {
            this.userData = [];
        } else {
            me.getUser2({ member_xm: member_xm, per_page: 100 }).then(({ data }) => {
                this.userData = data;
            });
        }

    }

    userData: any = [];

    pickerOptions: any = {
        shortcuts: [
            {
                text: '一个月',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 1);
                    picker.$emit('pick', end);
                }
            },
            {
                text: '三个月',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 3);
                    picker.$emit('pick', end);
                }
            },
            {
                text: '六个月',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 6);
                    picker.$emit('pick', end);
                }
            },
            {
                text: '一年',
                onClick(picker) {
                    const end = new Date();
                    end.setMonth(end.getMonth() + 12);
                    picker.$emit('pick', end);
                }
            }
        ]
    };

    /**
        * 校验配置
        *
        * @type {*}
        * @memberof mixinViewRules
        */
    rules: any = {
        room_sn: [
            {
                required: true,
                message: '请选择房间'
            }
        ],
        member_sn: [
            {
                required: true,
                message: '请选择住户'
            }
        ],
        end_time: [
            {
                required: true,
                message: '请选择有效期',
                trigger: 'blur'
            }
        ],
        group_sn: [
            {
                required: true,
                message: "请选择门禁组"
            }
        ]
    };
}
</script>
